import React, { useState } from 'react'

import { Button, Checkbox, Form, Input,message,Upload } from 'antd';

import { PlusOutlined } from '@ant-design/icons';
import { uplodeuseInfoApi } from '../../apis/userApi';
import {json, useNavigate} from 'react-router-dom';
import { eventBus } from '../../utils/eventBus';
export default function Proflie() {
    
    const  userInfo= JSON.parse(localStorage.userInfo)
    console.log('userInfo',userInfo)

    const [fileList,setFileList]=React.useState([{thumbUrl:"http://jacklv.cn/images/"+userInfo.imgUrl}])
    const navigate=useNavigate()
    const [loading,setLoading]=React.useState(false)
    const onFinish = async(values) => {
      
      console.log('Success:', values);
      const {account,userGroup}=values
      const params={
        account,
        userGroup,
        imgUrl:''
      }
      const response=values.Upload[0].response
      if(response){
        if(response.code===1){
          params.imgUrl=response.data
      }
      else{
        message.error("上传错误")
      }
      }
      else{
        params.imgUrl=values.Upload[0].uid
      }

      await uplodeuseInfoApi(params)
      const userInfo = {
        account,
        role:userGroup,
        imgUrl:params.imgUrl,
    }


    localStorage.userInfo = JSON.stringify(userInfo);
        message.success("更新成功");
    //通知头部去跟新头像
    eventBus.emit('syncAvatar')

    };
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
    };

    const normFile = (e) => {
        console.log('e',e)
        if (Array.isArray(e)) {
          return e;
        }
        setFileList(e.fileList) 
        return e?.fileList;
      };

  return (
    <div className='main' > <Form className='form' 
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
        
    }}
    initialValues={{
     account:userInfo.account,
     userGroup:userInfo.role,
     Upload:[{thumbUrl:'http://jacklv.cn/images/'+userInfo.imgUrl,uid:userInfo.imgUrl}]      
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label='账户名'
      name="account"
      rules={[
        {
          required: true,
          message: '请输入账户名!',
          
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="角色"
      name="userGroup"
      rules={[
        {
          required: true,
          message: '请输入角色!'
        },
      ]}
    >
      <Input disabled />
    </Form.Item>
    <Form.Item label="头像"  name="Upload" valuePropName="fileList" getValueFromEvent={normFile}
    
    rules={[
        {
          required: true,
          message: '头像!'
        },
      ]}
    
    >
          <Upload  name='avatar' action="http://jacklv.cn/users/uploadProfile" headers={{token:localStorage.token


          }} listType="picture-card">
            {!fileList.length && "Upload"}
          </Upload>
        </Form.Item>
      

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button loading={loading} type="primary" htmlType="submit">
        保存
      </Button>
    </Form.Item>
  </Form></div>
  
  )
}
